Photo by Casey Horner on Unsplash

try try body 裡的 code 改成如下

var body: some View {
    Text("Hello, SwiftUI Boys!")
}

畫一個大圈圈

將 Text("Hello, SwiftUI! Boys") 視圖替換為：

    Circle()

如果沒替換，會有兩個視圖

在 SwiftUI 中，VStack, HStack, 和 ZStack 都是用於布局界面的容器。它們的名稱中的首字母表示它們的主要布局方向或功能。讓我解釋一下每一個：

介紹寫 SwiftUI 三大容器，可以將子視圖做排序

• VStack (Vertical Stack) 垂直排序

• HStack (Horizontal Stack) 水平排序
  

• ZStack (Z- index Stack )
  

• 這是一個將視圖堆疊在其它視圖上方的容器。

• 它不是垂直或水平排列，而是按照添加的順序將視圖疊加在一起，先加入的視圖在底部，後加入的視圖在上面。

ZStack {
    RoundedRectangle(cornerRadius: 25.0)
        .fill(Color.blue)
        .padding()
    Image("Waterboys_2001")
        .resizable()
        .clipShape(Circle())
}

妳問我圖檔從哪設定 ?
在左側導覽區 Assets，存放我圖像和顏色的特殊資料夾。

妳問我SwiftUI 有 autolayout 嗎？

SwiftUI 沒有 Auto Layout !!

我召喚張三豐GPT，來教妳 SwiftUI 全新的布局系統心法。

而 Auto Layout 是 UIKit 中的布局系統，它依賴於約束來確定界面元素的位置和大小。

相反，SwiftUI 使用的是一種基於堆疊和修飾符的聲明性布局系統。這意味著你會聲明你希望的界面的外觀和行為，然後讓 SwiftUI 決定如何達到這些效果。

例如：

1. 堆疊：你可以使用 HStack, VStack, 和 ZStack 來垂直、水平或層疊的方式組合多個視圖。

   VStack {
       Text("Hello")
       Text("World")
   }
   
   

2. 修飾符：你可以使用修飾符來調整視圖的外觀和行為。例如，你可以使用 .padding() 來給一個視圖加上內邊距，或者使用 .frame(width:height:) 來給定具體的大小。

   Text("Hello, SwiftUI!")
       .padding(20)
       .background(Color.red)
       .cornerRadius(10)
   
   

3. 彈性布局：你可以使用 Spacer 來推動視圖到堆疊的一側，或者分隔堆疊中的視圖。

   HStack {
       Text("Left")
       Spacer()
       Text("Right")
   }
   
   

4. 等比例填充：使用 .frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:) 你可以定義視圖的大小範圍，讓它在可用空間中彈性變化。

整體來看，SwiftUI 提供了一種更簡單、更直觀的方法來建立和理解布局，特別是對於複雜的界面。而不需要像 Auto Layout 那樣考慮約束的創建和維護。

Anyway

用VStack布局界面的容器裝起來

VStack {
    Text("Hello, SwiftUI Boys!")
    Circle()
        .fill(.purple)
        .padding()
}